<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科目查询</title>

    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>


</head>
<body>


<div class="layui-container" align="center">
    <div class="layui-row">
        <div class="layui-col-md12">
            <h2 style="color:#4E5465;">
                科目列表
                <!--                <a href="InsertCourse" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm"-->
                <!--                   style="color: #2b2b2b;">-->
                <!--                    <i class="layui-icon">&#xe608;</i>添加-->
                <!--                </a>-->

                <a href="/studentLayer" class="layui-btn layui-btn-radius layui-btn-xs">
                    菜单
                    <i class="layui-icon">&#xe614;</i>
                </a>
            </h2>
        </div>
    </div>

    <table id="shop" lay-filter="shop" class="layui-table" style="width: auto;height: auto;text-align: center;">
        <!--    <colgroup></colgroup>-->

        <!--    <tr>-->
        <!--        <th>科目名字</th>-->
        <!--        <th>操作</th>-->
        <!--    </tr>-->


        <!--    <tbody id="selectCourse">-->
        <!--    </tbody>-->

    </table>
</div>
<br>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="add">添加班级</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    {{# if(d.status == 1){  }}
    <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#} else{ d.status == 0 }}
    <a class="layui-btn layui-btn-xs layui-btn-disabled" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled">删除</a>
    {{# } }}


</script>

<script type="text/html" id="IDtemplet">
    {{# if(d.status == 1 ){ }}
    <input type="checkbox" id="{{d.id}}" name="status" value="{{d.status}}" lay-filter="IDdemo" lay-skin="switch"
           lay-text="开启|冻结" checked>
    {{# } else{ d.status == 0 }}
    <input type="checkbox" id="{{d.id}}" name="status" value="{{d.status}}" lay-filter="IDdemo" lay-skin="switch"
           lay-text="开启|冻结">
    {{#  } }}
</script>


<script type="text/javascript">
    // $(document).ready(function () {
    //     $.ajax({
    //         dataType: "json",
    //         url: "/studentLayer/Course/SelectCourse",
    //         method: "POST",
    //         success: function (ajax) {
    //             // console.log(ajax);
    //             var html;
    //
    //             if (ajax.code == 0) {
    //                 ajax.dataAjax.forEach(function (value, index) {
    //                     html = html
    //                         + "<tr>"
    //                         + "<td>" + value.name + "</td>"
    //                         + "<td>" + '<a href="DeleteCourse?id=' + value.id + '">' + '删除' + '</a>'
    //                         + "&nbsp;&nbsp;"
    //                         + "<a  onclick='UP(" + value.id + ");' href='UpdateCourse?id=" + value.id + "'>" + "修改" + "</a>" + "</td>"
    //                         + "</tr>"
    //                 })
    //                 // console.log(html);
    //                 $('#selectCourse').html(html);
    //             } else {
    //                 alert("警告");
    //             }
    //         }
    //     })
    //
    // });
    //
    //
    // function UP(id) {
    //     alert(id);
    //     $.ajax({
    //         dataType: "json",
    //         type:"GET",
    //         url:"/studentLayer/Course/UpdateCourse",
    //         data:{"id":id}
    //     })
    // }

    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer;

        table.render({
            elem: '#shop',
            url: '/studentLayer/Course/SelectCourse',
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "data": res.dataAjax,
                    "count":res.count
                };
            },
            width: 660,
            page: true,
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', title: 'ID', width: '120', sort: true, align: 'center'},
                {field: 'name', title: '名字', width: '240', align: 'center'},
                {field: 'id', title: '操作', align: 'center', width: '150', toolbar: '#barDemo'},
                {field: 'status', title: '状态', width: '100', align: 'center', templet: '#IDtemplet'},
                {type: 'checkbox', fixed: 'right', width: '50'}
            ]],
        });


        form.on('switch(IDdemo)', function (obj) {
            // console.log(obj.othis);
            // console.log(obj.elem);
            // console.log(obj.elem.id);
            var status = obj.elem.value;

            if (obj.elem.checked == true) {
                status = 1;
                console.log(status);
                $.ajax({
                    dataType: 'json',
                    type: 'POST',
                    url: '/studentLayer/Course/UpCourseStatus',
                    data: {
                        "id": obj.elem.id,
                        "status": status
                    },
                    success: function (ajax) {
                        table.reload('shop');
                    }
                })
            } else if (obj.elem.checked == false) {
                status = 0;
                console.log(status);
                $.ajax({
                    dataType: 'json',
                    type: 'POST',
                    url: '/studentLayer/Course/UpCourseStatus',
                    data: {
                        "id": obj.elem.id,
                        "status": status
                    },
                    success: function (ajax) {
                        table.reload('shop');
                    }
                })


                layer.tips('已关闭', obj.othis);
            }


        })


        table.on('toolbar(shop)', function (obj) {
            var checkStatus = table.checkStatus('shop');
            var layEvent = obj.event;

            switch (layEvent) {
                case'add':
                    layer.open({
                        type: 2,
                        title: '添加',
                        maxmin: true,
                        area: ['100%', '100%'],
                        content: '/studentLayer/Course/InsertCourse',
                    })
                    break;
                case'getCheckData':
                    layer.msg(JSON.stringify(checkStatus.data));
                    break;
                case'getCheckLength':
                    layer.msg('选中:' + checkStatus.data.length + '条');
                    break;
                case'isAll':
                    layer.msg(checkStatus.isAll ? '已全选' : '未全选');
                    break;
            }


        });


        table.on('tool(shop)', function (obj) {
            var LayEvent = obj.event;
            var tr = obj.tr;
            var data = obj.data;
            console.log(obj);

            if (LayEvent == 'edit') {
                layer.msg('是否修改', {
                    btn: ['yes', 'no'],
                    yes: function (index, layero) {
                        layer.open({
                            type: 2,
                            title: '修改',
                            maxmin: true,
                            area: ['100%', '100%'],
                            content: '/studentLayer/Course/UpdateCourse?id=' + data.id,
                        })
                    },
                    btn2: function (index, layero) {
                        layer.close();
                    }

                });

            } else if (LayEvent == 'del') {
                layer.msg('是否删除', {
                    btn: ['yes', 'no'],
                    yes: function (index, layero) {
                        $.ajax({
                            dataType: 'json',
                            type: 'GET',
                            url: '/studentLayer/Course/DeleteCourse',
                            data: {"id": data.id},
                            success: function (ajax) {
                                obj.del();
                                layer.close(index);
                            }
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close();
                    }

                });
            }

        });


    });


</script>


</body>
</html>